<style lang="less">
.head-oper.head {
    & {
        height: 144px * 0.44;
        background-color: #fff;
        position: relative;
        padding-left: 20px;
        overflow: hidden;
        line-height: 1.4;
        width: 100%;
    }
    .content {
        & {
            height: 100%;
            position: relative;
            // padding-left: 80px;
            display: inline-block;
            padding-top: 3px;
        }
        .img {
            width: 70px;
            height: 70px;
            display: block;
            position: absolute;
            top: 43px;
            left: 0;
        }
        .title {
            font-size: 20px;
            font-weight: 500;
            text-align: left;
            color: rgba(0, 0, 0, 0.85);
            margin-top: 7px * 0.44;
            margin-bottom: 4px * 0.44;
        }

        .sub {
            font-size: 16px;
            text-align: left;
            color: rgba(36, 36, 36, 0.85);
        }
    }
    .btns {
        float: right;
        overflow: hidden;
        padding-top: 30px * 0.3;
        font-size: 12px;

        .btn {
            display: inline-block;
            margin-right: 9px;
            width: 100px * 0.6;
            height: 100px * 0.44;
            position: relative;
            padding-top: 71px * 0.5;
            text-align: center;
            color: rgba(0, 0, 0, 0.65);
            cursor: pointer;
        }

        .btn.has-hot::after {
            content: "";
            display: block;
            position: absolute;
            width: 14px;
            height: 14px;
            background: #ff4d4d;
            border-radius: 50%;
            top: 0;
            right: 18px;
            transform: translate(7px, -7px);
        }

        .btn::before {
            content: "";
            width: 64px * 0.5;
            height: 64px * 0.5;
            background-color: #82bfb2;
            border-radius: 5px;
            background-image: url("./../imgs/waitForm.png");
            background-size: 36px * 0.5 36px * 0.5;
            background-repeat: no-repeat;
            background-position: center;
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .wait-handle::before {
            background-image: url("./../imgs/waitForm.png");
        }
        .reimbursement::before {
            background-color: #b3ddd2;
            background-image: url("./../imgs/money.png");
        }
        .leave::before {
            background-color: #b1c5d2;
            background-image: url("./../imgs/user.png");
        }
        .loan::before {
            background-color: #f5b995;
            background-image: url("./../imgs/sealForm.png");
        }
        .notice::before {
            background-color: #ef9c6d;
            background-image: url("./../imgs/alarm.png");
        }
    }
}
</style>
<template>
    <div class="head-oper head">
        <div class="content">
            <!-- <a-avatar class="img" :size="70" :src="headImg" /> -->
            <div class="title">{{ welcomeStr }}</div>
            <div class="sub">{{ deptName }}</div>
        </div>
        <div class="btns">
            <a-badge :count="0" :offset="[-20, 2]">
                <div class="btn reimbursement" @click="toPage('/finance/financeList/ReimburseOrderList')">
                    <span>报销</span>
                </div>
            </a-badge>
            <a-badge :count="0" :offset="[-20, 2]">
                <div class="btn loan" @click="toPage('/finance/financeList/LoanOrderList')">
                    <span>借款</span>
                </div>
            </a-badge>
            <a-badge :count="0" :offset="[-20, 2]">
                <div class="btn leave" @click="toPage('/attendance/workLeaveList')">
                    <span>请假</span>
                </div>
            </a-badge>
            <a-badge :count="userTodoCount.todoCount" :offset="[-20, 2]">
                <div class="btn wait-handle" @click="toPage('/todoList')">
                    <span>待办</span>
                </div>
            </a-badge>
            <a-badge :count="userTodoCount.msgCount" :offset="[-20, 2]">
                <div class="btn notice" @click="toPage('/notice/noticeMsg?type=0')">
                    <span>通知</span>
                </div>
            </a-badge>
        </div>
    </div>
</template>
<script>
import { formatTimeStr } from '@/appBase/utils';
import { getNowUserInfo } from '../service/base';
import headImg from './../imgs/defUser.png';

export default {
    data() {
        return {
            headImg
        }
    },
    computed: {
        welcomeStr() {
            const userName = getNowUserInfo().userName;
            const h = parseInt(formatTimeStr(new Date(), 'HH'));
            let str = '';
            if (7 <= h && h < 10) {
                str = '早上好';
            } else if (h >= 10 && h < 13) {
                str = '中午好';
            } else if (h >= 13 && h < 18) {
                str = '下午好';
            } else {
                str = '晚上好';
            }
            return `${str}，${userName}`;
        },
        deptName() {
            return getNowUserInfo().deptName;
        },
        userTodoCount() {
            return this.$store.state.userTodoCount;
        }
    },
    created() {
    },
    watch: {
    },
    methods: {
        toPage(page) {
            if (!page) {
                this.$info({
                    content: '待后续完成'
                });
                return;
            }
            this.$router.push(page);
        }
    },

}
</script>